<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向滑屏</title>
    <style>
        * {
            user-select: none;
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position:relative;
        }

        #container {
            background: linear-gradient(#def, #123);
            padding: 20px;
            text-indent: 2em;
            line-height:1.5em;
            position:absolute;
            left: 0;
            top:0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="container">
            金 伟摄(人民视觉)

            中共中央总书记、国家主席习近平8月10日给“国际青年领袖对话”项目外籍青年代表回信，对他们积极到中国各地走访、深化对华了解表示赞赏，鼓励他们加强交流互鉴，为推动构建人类命运共同体贡献青春力量。近日，来自28个国家的36位项目外籍青年代表给习近平总书记写信，祝贺中国共产党百年华诞。

            近年来，许多国际人士在中国学习、工作、生活，见证了在中国共产党带领下，中国人民依靠自己的智慧和汗水，在中华大地上建设富饶美丽的家园，创造多姿多彩的文化，实现了梦寐以求的小康生活。

            “大湾区处处都有梦想开花的声音”

            本报记者程远州

            夜幕初降，登临广州塔，繁华的都市江景一览无余。

            “在这里，厚重的历史传统与蓬勃的现代活力碰撞，让这座大都市有了神奇的魅力。”在璀璨绚丽的珠江夜景中，来自清华大学的德国留学生秦赫宸感叹道。他参加的是由全球化智库和当代中国与世界研究院共同发起的“国际青年领袖对话”项目。

            近日，在该项目下的“国际青年中国行”活动中，秦赫宸同来自17个国家的20余名青年一道先后造访广州、东莞、深圳，一路调研、参观、体验，同当地企业及民众分享交流，深度感知粤港澳大湾区的发展活力，领略独具特色的岭南文化。

            “不久的将来，这里将成为大湾区中央商务区核心区，并将以总部经济、金融服务、商贸服务和科技创新等产业领域作为发展重点。”在广州南沙明珠湾规划展览馆，解说员向外籍青年们详细讲述“岭南水城、星级城市”的规划设计，勾勒出正加速到来的未来图景。

            在南沙智慧城市示范区的展板前，来自格鲁吉亚的郭凯赫驻足良久。“我在中国生活了许多年，之前没有关注过这个海边小城，没想到在粤港澳大湾区发展战略之下，短短几年，一座国际化现代化的智慧城市已经初具雏形。”

            地处珠江入海口和粤港澳大湾区地理中心，南沙自贸区正在崛起为大湾区新兴产业和人才汇聚的新高地，越来越多的青年人选择到南沙创业。在南沙创汇谷街区，外籍青年们走访了粤港澳(国际)青年创新创业基地。在这里，有许许多多的追梦故事。

            “不断优化的人才引进政策和人才培育机制，让大湾区处处都有梦想开花的声音。”已经在广州生活了8年多的俄罗斯姑娘达丽娅深有感触。目前在华南理工大学做博士后的她，致力于城市遗产保护和城市更新研究。“我很欣喜地看到，大湾区的城市正向着可持续发展的方向快速转变。”达丽娅说。

            沿着中国最繁忙的高速公路之一广深高速，外籍青年们“打卡”了东莞松山湖，继续感受大湾区的科创魅力。在华为溪流背坡村，宜人的园区环境让大家赞不绝口。乘坐绿色节能的有轨电车，参访团到达研发中心，与华为工作人员展开了深入交流。5G技术等一系列服务全球发展的前沿科技创新，以及中国快速发展的数字经济和智能制造业等话题引发大家的热烈讨论。

            “华为开展技术创新和新产品研发的过程令我印象深刻。”担任PTL集团中国—以色列商务解决方案顾问的以色列青年世民感慨，“从‘中国制造’到‘中国智造’，我切身体会到了大湾区蓬勃的科创活力”。

            “我的使命就是成为一名国际交流大使，把我在这里看到的告诉其他人。”来自加拿大的“90后”青年罗志成说。

            在深圳，参访团来到南山区政务服务中心模拟办理政务，亲身体验“最多跑一次”“数字城市”等政务服务，了解科技赋能下的社区治理；在深圳人才公园等地，大家驻足细看全球高科技人才在深创新成果案例，了解外国人在深圳创业的优惠政策，并与深圳市人才工作局局长张林，以及来自高校、高科技创业公司、在深创业国际企业的代表们展开深入对话，探索这座以开放、包容、年轻和活力著称的城市的“人才密码”。

            “只要是人才，就能在这里找到机会——这非常吸引人。”来自莱索托的非洲广东商会公关部部长李诺感叹。

        </div>
    </div>

    <script>
        let app = document.querySelector('#app');
        let container = document.querySelector('#container');

        app.addEventListener('touchstart', function (e) {
            e.preventDefault();
        });

        //绑定事件
        container.addEventListener('touchstart', function(e){
            //移除过渡
            this.style.transition = 'none';
            //获取手指按下时 Y 轴偏移量
            this.y = e.changedTouches[0].clientY;
            //获取容器元素距离顶部的偏移量
            this.t = container.offsetTop;
        });

        container.addEventListener('touchmove', function(e){
            //
            let _y = e.changedTouches[0].clientY;
            //计算新的 top 值
            let newTop = _y - this.y + this.t;
            //检测越界
            // if(newTop >= 0) newTop = 0;
            //计算最小的 top
            // let minTop = -(container.offsetHeight - app.offsetHeight);
            //判断
            // if(newTop <= minTop) newTop = minTop;

            //设置新的 top 值
            this.style.top = newTop + 'px';
        });

        //绑定 touchend 事件
        container.addEventListener('touchend', function(e){
            //添加过渡
            this.style.transition = 'all 0.5s cubic-bezier(0,.68,.22,1.5)';
            //判断是否越界
            let t = this.offsetTop;
            if(t >=0) t = 0;
            //计算最小的 top
            let minTop = -(container.offsetHeight - app.offsetHeight);
            //判断
            if(t <= minTop) t = minTop;
            //设置
            this.style.top = t + 'px';
        });
    </script>
</body>

</html>